<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('集成数字化管理系统')" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集成看板</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .gray-bg {
            background-color: #f4f7f9;
        }

        .wrapper {
            padding: 20px 0; /* 上下留白 20px，左右不留白 */
            max-width: calc(100% - 40px); /* 左右各留 20px 边距 */
            margin: 0 auto;
        }

        /* 顶部栏 */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #2c3e50;
            padding: 10px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .top-bar h1 {
            font-size: 24px;
            font-weight: bold;
            color: white;
            margin: 0;
        }

        .navbar {
            display: flex;
            gap: 10px;
        }

        .navbar button {
            color: white;
            background-color: transparent;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s, transform 0.2s;
        }

        .navbar button:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #1abc9c;
            transform: scale(1.05);
        }

        .navbar .active {
            background-color: rgba(255, 255, 255, 0.1);
            color: #1abc9c;
            transform: scale(1.05);
        }

        /* 下载按钮区域 */
        .button-container {
            display: flex;
            justify-content: space-between; /* 将内容分布在两端 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* label 和 button 之间的间距 */
            padding: 15px;
            background-color: #34495e;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: white;
        }

        .button-container label {
            color: white;
            font-size: 16px;
            white-space: nowrap; /* 防止文字换行 */
            flex: 1; /* label 占据剩余空间 */
        }

        .button-container button {
            padding: 8px 16px;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            transition: background-color 0.3s, transform 0.2s;
            background: linear-gradient(135deg, #3498db, #27ae60);
        }

        .button-container button:hover {
            background: linear-gradient(135deg, #2980b9, #219653);
            transform: scale(1.05);
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            margin: 0; /* 上下左右不留白 */
            font-size: 16px;
            background-color: #2c3e50; /* 表格背景色 */
            border-radius: 10px; /* 圆角 */
            overflow: hidden; /* 隐藏超出部分 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
            border: 1px solid #2c3e50; /* 表格边框颜色与背景色一致 */
        }

        table, th, td {
            border: 1px solid #444; /* 单元格边框 */
        }

        th, td {
            padding: 12px; /* 单元格内边距 */
            text-align: center; /* 文字居中 */
            color: white; /* 文字颜色 */
            font-weight: bold; /* 文字加粗 */
        }

        th {
            background-color: #34495e; /* 表头背景色 */
        }

        tr:nth-child(even) {
            background-color: #34495e; /* 偶数行背景色 */
        }

        tr:hover {
            background-color: #1abc9c; /* 鼠标悬停时的背景色 */
        }

        /* 下载按钮 */
        .download-btn {
            background: linear-gradient(135deg, #27ae60, #219653);
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s;
        }

        .download-btn:hover {
            background: linear-gradient(135deg, #219653, #1e8449);
            transform: scale(1.05);
        }

        .download-btn:active {
            background: linear-gradient(135deg, #1e8449, #196f3d);
            transform: translateY(2px);
        }

        .download-btn:focus {
            outline: none;
        }

        #download-btn,
        #upload-btn {
            display: inline-block;
            margin: 0;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #download-btn:hover,
        #upload-btn:hover {
            background-color: #0056b3;
        }

        /* 页脚 */
        .signup-footer {
            text-align: center;
            padding: 20px;
            background-color: #34495e;
            color: white;
            border-radius: 10px;
            margin-top: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .signup-footer a {
            color: #1abc9c;
            text-decoration: none;
        }

        .signup-footer a:hover {
            text-decoration: underline;
        }

        /* 卡片式布局 */
        .card {
            background-color: white; /* 父容器背景色 */
            border-radius: 10px;
            padding: 0; /* 移除内边距 */
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #2c3e50;
        }
    </style>

    <style>
        /* 整体容器样式 */
        #filter-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            margin-left: 15px;
        }

        /* 标签样式 */
        .filter-label {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 下拉框容器 */
        .select-wrapper {
            position: relative;
            display: inline-block;
            width: 200px; /* 调整宽度 */
        }

        /* 下拉框样式 */
        .styled-select {
            width: 100%;
            padding: 2px 40px 2px 15px; /* 增加内边距 */
            font-size: 18px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #f9f9f9;
            border: 2px solid #ddd;
            border-radius: 8px; /* 圆角 */
            appearance: none; /* 移除默认样式 */
            outline: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* 下拉框悬停效果 */
        .styled-select:hover {
            border-color: #007bff;
            background-color: #fff;
        }

        /* 下拉框焦点效果 */
        .styled-select:focus {
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        }

        /* 下拉箭头样式 */
        .select-arrow {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            pointer-events: none; /* 防止箭头遮挡点击 */
            color: #666;
            font-size: 12px;
        }

        /* 下拉框选项样式 */
        .styled-select option {
            padding: 10px;
            background-color: #fff;
            color: #333;
        }

        /* 下拉框选项悬停效果 */
        .styled-select option:hover {
            background-color: #007bff;
            color: #fff;
        }
    </style>

</head>
<body class="gray-bg">

<div class="wrapper">
    <!-- 顶部栏 -->
    <div class="top-bar">
        <h1>集成数字化管理系统</h1>
        <div class="navbar">
            <button id="home" onclick="location.href='/echarts_month'">首页</button>
            <button id="code_submission_details" onclick="setActive('code_submission_details')">代码提交详情</button>
            <button id="cnid_resource_detail" onclick="setActive('cnid_resource_detail')">cnid资源统计</button>
            <button id="apa_resource_detail" onclick="setActive('apa_resource_detail')">apa资源统计</button>
            <button id="team-overview" onclick="setActive('team-overview')">团队概览</button>
            <button id="performance" onclick="setActive('performance')">工时统计</button>
        </div>
    </div>

    <!-- 下载按钮区域 -->
    <div class="button-container">
        <label>以下数据为最近30天代码提交活跃度排名前30的代码模块情况统计数据</label>
        <button id="download-btn" style="display: none;">下载 Excel</button>
        <button id="upload-btn" style="display: none;">导入 Excel</button>
        <!-- 文件选择输入框（隐藏） -->
<!--        <input type="file" id="file-input" accept=".xlsx, .xls" style="display: none;" />-->
        <input type="file" id="file-input" accept=".xlsx, .xls" style="display: none;" onchange="uploadExcel(this)" />

    </div>

    <!-- 筛选器 -->
    <div id="filter-container">
        <label for="version-filter" class="filter-label">选择版本：</label>
        <div class="select-wrapper">
            <select id="version-filter" class="styled-select">
                <option value="all">全部</option>
                <!-- 动态生成的选项会放在这里 -->
            </select>
            <span class="select-arrow">&#9660;</span> <!-- 下拉箭头 -->
        </div>
    </div>
    <!-- 页面内容部分 -->
    <div id="report-container" class="card">
        <!-- 动态加载报表的容器 -->
    </div>

    <!-- 公用弹窗 -->
    <div id="popup" class="popup"></div>

    <!-- 页脚 -->
    <div class="signup-footer">
        <div class="pull-center">
            Copyright © 2024-2025 Changan SDA智驾工作组集成开发团队 All Rights Reserved.<br>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {

    });
</script>

<script>
       // 用于存储定时器 ID，避免重复绑定
       let intervalId = null;
       // 全局变量，用于保存事件监听器函数
       let downloadExcelWithParam = null;

       // 全局变量，记录当前的报表类型（cnid 或 apa）
       let currentReportType = 'cnid';  // 默认设置为 cnid

       // 显示指定的按钮
       function showButton(buttonId) {
           const button = document.getElementById(buttonId);
           if (button) {
               button.style.display = 'inline-block';
           }
       }

       // 隐藏指定的按钮
       function hideButton(buttonId) {
           const button = document.getElementById(buttonId);
           if (button) {
               button.style.display = 'none';
           }
       }

       // 发送 AJAX 请求并获取代码提交详情数据
       function fetchCodeSubmissionDetails(container) {
           // 隐藏筛选框
           const filterContainer = document.getElementById('filter-container');
           if (filterContainer) {
               filterContainer.style.display = 'none';
           }

           $.ajax({
               url: '/api/C2CodeDetails/top30CodeDetails',  // API
               method: 'GET',
               success: function (response) {
                   let content = ''; // 定义动态内容

                   // 检查返回的数据是否有效
                   if (response.status === 200 && response.data && Array.isArray(response.data)) {
                       if (response.data.length > 0) {
                           // 构建表格内容
                           content =
                               `<div id="code-submission-content">
                                   <table id="submission-table">
                                       <thead>
                                           <tr>
                                               <th>序号</th>
                                               <th>模块名</th>
                                               <th>负责人</th>
                                               <th>提交次数</th>
                                               <th>合并请求次数</th>
                                               <th>合并成功次数</th>
                                               <th>合并失败次数</th>
                                               <th>打Tag次数</th>
                                           </tr>
                                       </thead>
                                       <tbody>`;

                           // 定义一个计数变量
                           let index = 1;

                           response.data.forEach(function (item) {
                               content +=
                                   `<tr>
                                       <td>${index++}</td>
                                       <td>${item["moduleName"]}</td>
                                       <td>${item["responsiblePerson"]}</td>
                                       <td>${item["commitCount"]}</td>
                                       <td>${item["mergeCount"]}</td>
                                       <td>${item["mergeSuccessCount"]}</td>
                                       <td>${item["mergeFailedCount"]}</td>
                                       <td>${item["tagCount"]}</td>
                                   </tr>`;
                           });

                           content +=
                                       `</tbody>
                                   </table>
                               </div>`;
                       } else {
                           content = '<div>No data available</div>';
                       }
                   } else {
                       content = '<div>Invalid response data</div>';
                   }

                   // 渲染到指定区域
                   container.innerHTML = content;

                   // 显示下载按钮，隐藏上传按钮
                   showButton('download-btn');
                   hideButton('upload-btn');

                   // 绑定下载功能
                   bindDownloadButton("代码提交详情");
               },
               error: function (xhr, status, error) {
                   console.error('Error fetching data:', error);
                   const errorContent = `<div>Error fetching data. Please try again later.</div>`;
                   container.innerHTML = errorContent;
               }
           });
       }

       // 构建表格内容的函数
         function buildTableContent(data) {
            return `
            <div id="resource-detail-content">
                <table id="resource-table">
                    <thead>
                        <tr>
                            <th onclick="sortTable('id')">序号 <span id="idArrow">↕</span></th>
                            <th onclick="sortTable('processName')">进程名称 <span id="processNameArrow">↕</span></th>
                            <th onclick="sortTable('version')">版本 <span id="versionArrow">↕</span></th>
                            <th onclick="sortTable('max90')">最大90%值 <span id="max90Arrow">↕</span></th>
                            <th onclick="sortTable('max95')">最大95%值 <span id="max95Arrow">↕</span></th>
                            <th onclick="sortTable('max97')">最大97%值 <span id="max97Arrow">↕</span></th>
                            <th onclick="sortTable('date')">日期 <span id="dateArrow">↕</span></th>
                        </tr>
                    </thead>
                    <tbody id="resource-table-body">
                        ${data.map((item, index) => `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${item.processName}</td>
                                <td>${item.version}</td>
                                <td>${item.max90}</td>
                                <td>${item.max95}</td>
                                <td>${item.max97}</td>
                                <td>${item.date}</td>
                            </tr>`
                        ).join('')}
                    </tbody>
                </table>
            </div>`;
        }


       // 生成版本筛选器
       function generateVersionFilter(data) {
           const versionFilter = document.getElementById('version-filter');
           versionFilter.innerHTML = '<option value="all">全部</option>'; // 重置选项

           // 获取所有唯一的版本号
           const versions = [...new Set(data.map(item => item.version))];

           // 生成选项
           versions.forEach(version => {
               const option = document.createElement('option');
               option.value = version;
               option.textContent = version;
               versionFilter.appendChild(option);
           });
       }

       // 发送 AJAX 请求并获取资源统计数据
       function fetchCnidResourceDetails(container) {
           // 显示筛选框
           const filterContainer = document.getElementById('filter-container');
           if (filterContainer) {
               filterContainer.style.display = 'flex'; // 或者 'block'，根据你的布局
           }
           $.ajax({
               url: '/api/C2ResourceDetail/cnid',  // API
               method: 'GET',
               success: function (response) {
                   let content = ''; // 定义动态内容

                   // 检查返回的数据是否有效
                   if (response.status === 200 && response.data && Array.isArray(response.data)) {
                       if (response.data.length > 0) {
                           content = buildTableContent(response.data);
                           generateVersionFilter(response.data); // 生成筛选器选项
                       } else {
                           content = '<div>No data available</div>';
                       }
                   } else {
                       content = '<div>Invalid response data</div>';
                   }

                   // 渲染到指定区域
                   container.innerHTML = content;

                   // 显示下载按钮，上传按钮
                   showButton('download-btn');
                   showButton('upload-btn');

                   // 绑定下载功能
                   bindDownloadButton("cnid资源统计");
               },
               error: function (xhr, status, error) {
                   console.error('Error fetching data:', error);
                   const errorContent = `<div>Error fetching data. Please try again later.</div>`;
                   container.innerHTML = errorContent;
               }
           });
       }

       // 发送 AJAX 请求并获取资源统计数据
       function fetchApaResourceDetails(container) {
           // 显示筛选框
           const filterContainer = document.getElementById('filter-container');
           if (filterContainer) {
               filterContainer.style.display = 'flex'; // 或者 'block'，根据你的布局
           }

           $.ajax({
               url: '/api/C2ResourceDetail/apa',  // API
               method: 'GET',
               success: function (response) {
                   let content = ''; // 定义动态内容

                   // 检查返回的数据是否有效
                   if (response.status === 200 && response.data && Array.isArray(response.data)) {
                       if (response.data.length > 0) {
                           content = buildTableContent(response.data);
                           generateVersionFilter(response.data); // 生成筛选器选项
                       } else {
                           content = '<div>No data available</div>';
                       }
                   } else {
                       content = '<div>Invalid response data</div>';
                   }

                   // 渲染到指定区域
                   container.innerHTML = content;

                   // 显示下载按钮，上传按钮
                   showButton('download-btn');
                   showButton('upload-btn');

                   // 绑定下载功能
                   bindDownloadButton("apa资源统计");
               },
               error: function (xhr, status, error) {
                   console.error('Error fetching data:', error);
                   const errorContent = `<div>Error fetching data. Please try again later.</div>`;
                   container.innerHTML = errorContent;
               }
           });
       }


        // 排序功能实现
        let currentSortBy = 'version'; // 默认按进程名称排序
        let currentSortOrder = 'default'; // 默认状态为未排序

        function sortTable(sortBy) {
            if (currentSortBy === sortBy) {
                // 切换排序状态
                if (currentSortOrder === 'default') {
                    currentSortOrder = 'asc'; // 默认 → 升序
                } else if (currentSortOrder === 'asc') {
                    currentSortOrder = 'desc'; // 升序 → 降序
                } else {
                    currentSortOrder = 'default'; // 降序 → 默认
                }
            } else {
                // 切换排序列，重置为升序
                currentSortBy = sortBy;
                currentSortOrder = 'asc';
            }

            const apiEndpoint = currentReportType === 'cnid'
                ? '/api/C2ResourceDetail/sortCnidResourceDetails'
                : '/api/C2ResourceDetail/sortApaResourceDetails';

            // 如果是默认状态，则不传递排序参数
            const queryParams = currentSortOrder === 'default'
                ? ''
                : `?sortBy=${currentSortBy}&sortOrder=${currentSortOrder}`;

            fetch(`${apiEndpoint}${queryParams}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200 && data.data) {
                        updateTable(data.data);
                        updateSortArrows();
                        // 保持版本筛选状态
                        const versionFilter = document.getElementById('filter-container');
                        versionFilter.dispatchEvent(new Event('change'));
                    }
                });
        }

        function updateSortArrows() {
            // 重置所有箭头为默认状态
            document.querySelectorAll("th span").forEach(span => {
                span.textContent = "↕";
            });

            // 更新当前排序列的箭头
            const arrowSpan = document.getElementById(currentSortBy + "Arrow");
            if (arrowSpan) {
                if (currentSortOrder === 'asc') {
                    arrowSpan.textContent = "↑"; // 升序
                } else if (currentSortOrder === 'desc') {
                    arrowSpan.textContent = "↓"; // 降序
                } else {
                    arrowSpan.textContent = "↕"; // 默认
                }
            }
        }

        function updateTable(data) {
            const container = document.getElementById('report-container');
            if (!container) return;

            // 构建表格内容
            const tableContent = `
                <div id="resource-detail-content">
                    <table id="resource-table">
                        <thead>
                            <tr>
                                <th onclick="sortTable('id')">序号 <span id="idArrow">↕</span></th>
                                <th onclick="sortTable('processName')">进程名称 <span id="processNameArrow">↕</span></th>
                                <th onclick="sortTable('version')">版本 <span id="versionArrow">↕</span></th>
                                <th onclick="sortTable('max90')">最大90%值 <span id="max90Arrow">↕</span></th>
                                <th onclick="sortTable('max95')">最大95%值 <span id="max95Arrow">↕</span></th>
                                <th onclick="sortTable('max97')">最大97%值 <span id="max97Arrow">↕</span></th>
                                <th onclick="sortTable('date')">日期 <span id="dateArrow">↕</span></th>
                            </tr>
                        </thead>
                        <tbody id="resource-table-body">
                            ${data.map((item, index) => `
                                <tr>
                                    <td>${index + 1}</td>
                                    <td>${item.processName}</td>
                                    <td>${item.version}</td>
                                    <td>${item.max90}</td>
                                    <td>${item.max95}</td>
                                    <td>${item.max97}</td>
                                    <td>${item.date}</td>
                                </tr>`
                            ).join('')}
                        </tbody>
                    </table>
                </div>`;

            // 将表格内容插入到 container 中
            container.innerHTML = tableContent;
        }



       // 下载 Excel 文件的功能
       function downloadExcel(type_name) {
           const table = document.getElementById('resource-table') || document.getElementById('submission-table');
           const wb = XLSX.utils.table_to_book(table, { sheet: 'Sheet1' });
           const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

           // 创建一个 Blob 对象，并下载
           const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
           const link = document.createElement('a');
           link.href = URL.createObjectURL(blob);
           const safeTypeName = type_name.replace(/[^a-zA-Z0-9_-]/g, '_'); // 将非法字符替换为下划线
           link.download = `${type_name}.xlsx`;
           link.click();
       }

       // 确保不会重复绑定点击事件
       function bindDownloadButton(type_name) {
           const downloadBtn = document.getElementById('download-btn');
           if (downloadBtn) {
               // 移除旧的事件监听器
               if (downloadExcelWithParam) {
                   downloadBtn.removeEventListener('click', downloadExcelWithParam);
               }

               // 定义新的事件监听器函数
               downloadExcelWithParam = function () {
                   downloadExcel(type_name);
               };

               // 添加新的事件监听器
               downloadBtn.addEventListener('click', downloadExcelWithParam);
           }
       }

       // 将字符串转为二进制数组
       function s2ab(s) {
           const buf = new ArrayBuffer(s.length);
           const view = new Uint8Array(buf);
           for (let i = 0; i < s.length; i++) {
               view[i] = s.charCodeAt(i) & 0xFF;
           }
           return buf;
       }

       // 根据报表类型显示相应内容
       function showReport(reportType) {
           const container = document.getElementById('report-container');
           const buttonContainer = document.querySelector('.button-container');
           const label = buttonContainer.querySelector('label');  // 获取label元素

           // 先清空容器
           container.innerHTML = '';

           // 隐藏下载按钮
           buttonContainer.style.display = 'none';

           // 清除已有的定时器
           if (intervalId) {
               clearInterval(intervalId);
               intervalId = null;
           }

           // 根据报表类型设置 label 内容和获取数据
           switch (reportType) {
               case 'code_submission_details':
                   // 设置label内容
                   label.innerHTML = '以下数据为最近30天代码提交活跃度排名前30的代码模块情况统计数据';

                   // 立刻获取一次数据
                   fetchCodeSubmissionDetails(container);

                   // 显示下载按钮
                   buttonContainer.style.display = 'block';

                   // 设置定时器每 5 秒获取一次数据
<!--                   intervalId = setInterval(function () {-->
<!--                       fetchCodeSubmissionDetails(container);-->
<!--                   }, 5000);-->
                   break;

               case 'cnid_resource_detail':
                   // 设置label内容
                   label.innerHTML = '以下数据为cnid资源统计详情';

                   // 立刻获取一次数据
                   fetchCnidResourceDetails(container);

                   // 设置资源类型
                   setReportType('cnid');

                   // 显示下载按钮
                   buttonContainer.style.display = 'block';

                   // 设置定时器每 5 秒获取一次数据 (暂时禁用自动刷新功能)
<!--                   intervalId = setInterval(function () {-->
<!--                       fetchCnidResourceDetails(container);-->
<!--                   }, 60000);-->
                   break;

               case 'apa_resource_detail':
                   // 设置label内容
                   label.innerHTML = '以下数据为apa资源统计详情';

                   // 立刻获取一次数据
                   fetchApaResourceDetails(container);

                   // 设置资源类型
                   setReportType('apa');

                   // 显示下载按钮
                   buttonContainer.style.display = 'block';

                   // 设置定时器每 5 秒获取一次数据
<!--                   intervalId = setInterval(function () {-->
<!--                       fetchApaResourceDetails(container);-->
<!--                   }, 60000);-->
                   break;

               // 其他case保持不变
               case 'home':
                   container.innerHTML =
                       `<div id="home-content">
                           <table>
                               <thead>
                                   <tr>
                                       <th>序号</th>
                                       <th>标题</th>
                                       <th>创建时间</th>
                                   </tr>
                               </thead>
                               <tbody>
                                   <tr><td>1</td><td>欢迎页内容</td><td>2025-01-01</td></tr>
                                   <tr><td>2</td><td>最新公告</td><td>2025-01-05</td></tr>
                               </tbody>
                           </table>
                       </div>`;
                   break;

               default:
                   container.innerHTML = '<p>未找到对应的报表内容。</p>';
           }
       }

       // 设置当前激活的导航栏按钮
       function setActive(buttonId) {
           // 清除所有按钮的 active 状态
           const buttons = document.querySelectorAll('.navbar button');
           buttons.forEach(button => button.classList.remove('active'));

           // 设置选中按钮的 active 状态
           const activeButton = document.getElementById(buttonId);
           activeButton.classList.add('active');

           // 显示对应的报表
           showReport(buttonId);
       }

       // 绑定导入按钮点击事件
       document.getElementById('upload-btn').addEventListener('click', function () {
           // 触发文件选择框
           document.getElementById('file-input').click();
       });

       // 监听文件选择
       document.getElementById('file-input').addEventListener('change', function (event) {
           const file = event.target.files[0]; // 获取用户选择的文件
           if (file) {
               uploadExcel(file); // 调用上传函数
           }
       });

       // 上传 Excel 资源文件
       function uploadExcel(fileInput) {
           const file = fileInput.files[0]; // 获取上传的文件
           if (!file) {
               alert('请选择一个文件进行上传。');
               return;
           }

           const fileName = file.name.toLowerCase(); // 获取文件名并转换为小写
           const formData = new FormData();
           formData.append('file', file); // 将文件添加到 FormData

           let uploadUrl = '';
           // 根据文件名和报告类型判断上传URL
           if (fileName.includes('cnid') && currentReportType === 'cnid') {
               uploadUrl = '/api/upload-excel/cnid'; // CNID 数据上传
           } else if (fileName.includes('apa') && currentReportType === 'apa') {
               uploadUrl = '/api/upload-excel/apa'; // APA 数据上传
           } else {
               alert('文件名或报告类型不匹配，请检查文件名和当前选择的报告类型。');
               fileInput.value = ''; // 清除文件输入框
               return;
           }

           // 发送 AJAX 请求
           fetch(uploadUrl, {
               method: 'POST',
               body: formData,
           })
               .then(response => response.json())
               .then(data => {
                   if (data.success) {
                       alert('文件上传成功，数据已导入数据库！');
                   } else {
                       alert('文件上传失败：' + data.message);
                   }
               })
               .catch(error => {
                   console.error('上传失败：', error);
                   alert('上传失败，请检查网络或文件格式。');
               });

           // 清除文件输入框，确保能重新选择文件
           fileInput.value = '';
       }

       // 更新报表类型（cnid 或 apa）
       function setReportType(reportType) {
           currentReportType = reportType;  // 设置当前报表类型
       }

       // 绑定版本筛选器事件
       document.getElementById('version-filter').addEventListener('change', function () {
           const selectedVersion = this.value;
           const table = document.getElementById('resource-table');
           const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

           for (let row of rows) {
               const versionCell = row.getElementsByTagName('td')[2]; // 假设版本号在第3列
               if (selectedVersion === 'all' || versionCell.textContent === selectedVersion) {
                   row.style.display = '';
               } else {
                   row.style.display = 'none';
               }
           }
       });
</script>


<script type="text/javascript">
    <!--  event listenner  -->
    document.addEventListener("DOMContentLoaded", function () {
        // 设置默认激活的按钮为 "代码提交详情"
        setActive('code_submission_details');

    <!-- Unnecessary initialization -->
<!--        // 初始化排序-->
<!--        setTimeout(() => sortTable('default'), 500000);-->
    });
</script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>-->
</body>
</html>